<template>
  <div class="wraps">
    <el-card class="box-card" shadow="hover" style="height: 83.5vh; position: relative;">
      <div slot="header" class="clearfix">
        <span style="font-size: 20px; color: #1890ff; font-weight: 550">物资核控</span>
      </div>

      <!-- 顶部按钮 -->
      <el-row :gutter="10" class="mb8">
<!--        <el-col :span="1.5">-->
<!--          <el-button-->
<!--            type="primary"-->
<!--            icon="el-icon-download"-->
<!--            size="mini"-->
<!--            @click="handleExport"-->
<!--          >导出Excel-->
<!--          </el-button>-->
<!--        </el-col>-->
        <right-toolbar @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table class="fixedTableOne" v-loading="loading" height="65vh" highlight-current-row :data="wzHkList"
                :header-cell-style="{background:'#F0F8FF',color:'#000000',fontWeight:'bold'}">
        <el-table-column label="序号" align="center" type="index" width="60" :index="indexMethod"/>
        <el-table-column show-overflow-tooltip label="物资名称" align="center" prop="wzName"/>
        <el-table-column show-overflow-tooltip label="物资规格" align="center" prop="wzGg"/>
        <el-table-column show-overflow-tooltip label="更换频率指标(天/只)" align="center" prop="ghPlZb"/>
        <el-table-column align="center" label="2024年11月">
          <el-table-column show-overflow-tooltip label="更换数量" align="center" prop="esnSyyGhSl"/>
          <el-table-column show-overflow-tooltip label="更换频率(天/只)" align="center" prop="esnSyyGhPl"/>
          <el-table-column show-overflow-tooltip label="节超率" align="center">
            <template slot-scope="scope">
              {{ jcl(scope.row.ghPlZb, scope.row.esnSyyGhPl) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="2024年12月">
          <el-table-column show-overflow-tooltip label="更换数量" align="center" prop="esnSeyGhSl"/>
          <el-table-column show-overflow-tooltip label="更换频率(天/只)" align="center" prop="esnSeyGhPl"/>
          <el-table-column show-overflow-tooltip label="节超率" align="center">
            <template slot-scope="scope">
              {{ jcl(scope.row.esnSyyGhPl, scope.row.esnSeyGhPl) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="2025年1月">
          <el-table-column show-overflow-tooltip label="更换数量" align="center" prop="ewnYyGhSl"/>
          <el-table-column show-overflow-tooltip label="更换频率(天/只)" align="center" prop="ewnYyGhPl"/>
          <el-table-column show-overflow-tooltip label="节超率" align="center">
            <template slot-scope="scope">
              {{ jcl(scope.row.esnSeyGhPl, scope.row.ewnYyGhPl) }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />


    </el-card>

  </div>
</template>

<script>
import {selectWzHk} from "@/api/wzgl/wzxx";

export default {
  name: "index", //物资核控
  data() {
    return {
      loading: false,
      wzHkList: null, //物资核控列表
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wzName: null,
        wzGg: null,
        ghPlZb: null,
        esnJyGhSl: null,
        esnSyGhSl: null,
        esnSyyGhSl: null,
        esnSeyGhSl: null,
        deptId: null,
        deptName: null,
        esnSyyGhPl: null,
        esnSeyGhPl: null,
        ewnYyGhSl: null,
        ewnYyGhPl: null,
      },

    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 导出按钮操作 */
    handleExport() {
      this.download('wzgl/wzxx/wzhk/export', {
        ...this.queryParams
      }, `物资核控_${new Date().getTime()}.xlsx`)
    },
    /** 自定义序号 */
    indexMethod(index){
      let pageNum = this.queryParams.pageNum - 1;
      if((pageNum!==-1 && pageNum!==0)){
        return (index + 1) + (pageNum  * this.queryParams.pageSize);
      }else{
        return (index + 1)
      }
    },
    getList() {
      this.loading = true
      selectWzHk(this.queryParams).then(res => {
        console.log(res, 'dasadsads')
        this.wzHkList = res.rows
        this.total = res.total;
        this.loading = false
      })
    },
    /**
     * 节超率计算
     * @param syPl 上月更换频率
     * @param byPl 本月更换频率
     * @returns {string}
     */
    jcl(syPl, byPl) {
      if (byPl === '/' || syPl === 0) return '/'; // 防止除以零
      return (((syPl - parseFloat(byPl)) / syPl) * 100).toFixed(2) + '%'; // 计算并格式化为保留两位小数的百分比
    },

  },
}
</script>

<style scoped>
.wraps {
  position: relative;
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

</style>

